<template>
  <el-breadcrumb v-show="!isHide" class="breadcrumb" separator-class="el-icon-arrow-right">
    <el-breadcrumb-item
      v-for="route in levelList"
      :to="{ path: route.path }"
      :key="route.path"
    >{{route.title}}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  name: 'breadcrumbIndex',
  data () {
    return {
      levelList: []
    }
  },
  computed: {
    isHide () {
      return this.$store.getters.nav.isHide
    }
  },
  created () {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb () {
      const matchedArr = this.$route.matched.map(item => {
        return { path: item.path, title: item.meta.title }
      })

      const first = this.$route.matched[0]

      if (
        first &&
        first.name.toLocaleLowerCase() !== 'Index'.toLocaleLowerCase()
      ) {
        matchedArr.unshift({ path: '/index', title: '首页' })
      }
      this.levelList = matchedArr
    }
  },
  watch: {
    $route () {
      this.getBreadcrumb()
    }
  }
}
</script>

<style lang="scss" scoped>
.breadcrumb {
  padding: 16px 0;
}
</style>
